<template>
  <div class="projuect-detail-container">
    <a-card title="项目详情">
      <div class="form-container">
        <a-row :gutter="50">
          <a-col :span="12">
            <div class="form-input-material">
              <input
                class="form-control-material"
                placeholder=" "
                :disabled="isDisabled"
                v-model="formData.projectName"
              />
              <label>项目名称</label>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form-input-material">
              <input
                class="form-control-material"
                placeholder=" "
                :disabled="isDisabled"
                v-model="formData.projectDesc"
              />
              <label>项目描述</label>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="50">
          <a-col :span="12">
            <div class="form-check">
              <label
                ><a-tooltip placement="top">
                  <template slot="title">
                    <div>
                      <p>访问原型时提示输入密码！</p>
                      <p>
                        不设置密码，会公开在网络中，存在数据丢失风险请谨慎！
                      </p>
                    </div>
                  </template>
                  <div class="label-help">
                    设置密码 <a-icon class="icon" type="question-circle" />
                  </div> </a-tooltip
              ></label>
              <input
                type="checkbox"
                v-model="formData.passType"
                class="form-switch"
                id="passTypee"
                name="hobby"
                :disabled="isDisabled"
                :true-value="1"
                :false-value="0"
              />
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form-input-material" v-if="formData.passType == 1">
              <input
                class="form-control-material"
                placeholder=" "
                :disabled="isDisabled"
                v-model="formData.projectPassword"
              />
              <label>访问密码</label>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="50">
          <a-col :span="12">
            <div class="form-check">
              <label
                ><a-tooltip placement="top">
                  <template slot="title">
                    <p>仅公开在系统中，其他人也可以查看预览！</p>
                  </template>
                  <div class="label-help">
                    是否公开 <a-icon class="icon" type="question-circle" />
                  </div> </a-tooltip
              ></label>
              <input
                type="checkbox"
                :disabled="isDisabled"
                v-model="formData.toOpen"
                class="form-switch"
                id="toOpene"
                :true-value="1"
                :false-value="0"
                name="hobbys"
              />
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form-input-material">
              <input
                class="form-control-material"
                placeholder=" "
                disabled
                v-model="formData.projectVersion"
              />
              <label>最新版本</label>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="50">
          <a-col :span="24">
            <div class="form-input-material">
              <input
                class="form-control-material"
                placeholder=" "
                disabled
                v-model="formData.previewUrl"
              />
              <label
                >访问地址
                <a
                  v-if="formData.previewUrl"
                  href="javascript:;"
                  v-clipboard:success="copySuccess"
                  v-clipboard:error="copyError"
                  v-clipboard:copy="formData.previewUrl"
                  >复制</a
                >
              </label>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="50">
          <a-col :span="12">
            <div class="form-input-material">
              <input
                class="form-control-material"
                placeholder=" "
                disabled
                v-model="formData.createByName"
              />
              <label>创建人</label>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form-input-material">
              <input
                class="form-control-material"
                placeholder=" "
                disabled
                v-model="formData.updateTime"
              />
              <label>更新时间</label>
            </div>
          </a-col>
        </a-row>

        <div style="display: flex; justify-content: center">
          <button
            class="btn btn-primary btn-jittery"
            style="margin: 0 auto"
            v-if="isChange"
            :disabled="isDisabled"
            @click="updateInfo"
          >
            保存
          </button>
        </div>
      </div>
    </a-card>

    <a-card title="文件上传" style="margin-top: 20px" v-if="this.type != 1">
      <a-spin :spinning="spinning" >
        <a-upload-dragger
          accept="application/zip"
          :fileList="fileList"
          :beforeUpload="beforeUpload"
          :customRequest="handleUpload"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
          <p class="ant-upload-text">点击或拖拽文件到此处上传</p>
          <p class="ant-upload-hint">请上传ZIP类型的文件</p>
        </a-upload-dragger>
      </a-spin>
    </a-card>

    <a-card title="文件列表" style="margin-top: 20px">
      <a-table
        :columns="columns"
        :data-source="formData.detailList"
        :loading="tableLoading"
        rowKey="id"
      >
        <span slot="name" slot-scope="text">{{ text }}</span>
        <span slot="previewUrl" slot-scope="text">
          <a v-if="text" :href="jumpURL(text)" target="_blank">{{ text }}</a>
        </span>
        <span slot="actionTitle">操作</span>
        <span slot="action" slot-scope="text, record">
          <a v-if="record.originalName" @click="downLoadFile(record)">下载</a>
          <a-divider v-if="record.originalName" type="vertical" />
          <a-popconfirm
            title="确定删除此项？"
            ok-text="确定"
            @confirm="confirmDelete(record.id)"
            cancel-text="取消"
          >
            <a type="danger">删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import {
  getProtoDetail,
  updateProtoDetail,
  projectDownload,
  deleteProjectFile,
  uploadProjectFile
} from "@/api/prototype.js";
import { mapGetters } from "vuex";
export default {
  props: ["id", "type"],
  data() {
    return {
      columns: [
        {
          title: "文件编号",
          dataIndex: "fileNewName",
          key: "fileNewName",
          align: "center"
        },
        {
          title: "文件名称",
          dataIndex: "originalName",
          key: "originalName",
          align: "center"
        },
        {
          title: "文件类型",
          dataIndex: "uploadFileType",
          key: "uploadFileType",
          align: "center"
        },
        {
          title: "版本",
          dataIndex: "version",
          key: "version",
          align: "center"
        },
        {
          title: "预览地址",
          dataIndex: "previewUrl",
          key: "previewUrl",
          align: "center",
          scopedSlots: { customRender: "previewUrl" }
        },
        {
          title: "上传人",
          dataIndex: "createByName",
          key: "createByName",
          align: "center"
        },
        {
          title: "上传时间",
          dataIndex: "createTime",
          key: "createTime",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          scopedSlots: { customRender: "action" }
        }
      ],
      fileList: [],
      formData: {},
      oldFormData: {},
      isChange: false,
      isFirstGet: true,
      uploading: false,
      tableLoading: false,
      spinning:false
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    async handleUpload() {
      const { fileList } = this;
      const formData = new FormData();
      formData.append("code", this.formData.projectCode);
      formData.append("file", fileList[0]);
      formData.append("projectId", this.formData.id);
      this.uploading = true;
      this.spinning = true;
      try {
        const { code, data, msg } = await uploadProjectFile(formData);
        if (code === 200) {
          this.getDetail();
          this.$notification.success({
            message: msg
          });
        }
      } catch (error) {}
      this.uploading = false;
      this.fileList = [];
      this.spinning = false;
    },
    beforeUpload(file) {
      if (file.type.indexOf("zip") == -1) {
        this.$message.warning("请上传ZIP文件");
        this.fileList = [];
        return false;
      } else {
        this.fileList = [file];
      }
    },
    async confirmDelete(id) {
      try {
        const { code, data, msg } = await deleteProjectFile({ id });
        if (code === 200) {
          this.getDetail();
          this.$notification.success({
            message: data
          });
        }
      } catch (error) {}
    },
    async downLoadFile(row) {
      try {
        const res = await projectDownload({ id: row.id });
        const aLink = document.createElement("a");
        var binaryData = [];
        binaryData.push(res);
        const blob = new Blob(binaryData);
        aLink.href = window.URL.createObjectURL(blob);
        aLink.setAttribute("download", decodeURI(row.originalName));

        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink);
      } catch (error) {}
    },
    jumpURL(url) {
      return `${window.location.origin}${url}`;
    },
    copySuccess(e) {
      this.$notification.success({
        message: "复制成功"
      });
    },
    copyError(e) {
      this.$notification.error({
        message: "复制失败"
      });
    },
    async getDetail() {
      this.tableLoading = true;
      try {
        const { code, data, msg } = await getProtoDetail({ id: this.id });
        if (code == 200) {
          if (data.previewUrl) {
            data.previewUrl = `${window.location.origin}${data.previewUrl}`;
          }
          // passType
          // toOpen
          this.formData = data;
          this.oldFormData = JSON.parse(JSON.stringify(data));
          this.isChange = false;
        }
      } catch (error) {}
      this.tableLoading = false;
    },
    async updateInfo() {
      try {
        const { code, msg } = await updateProtoDetail(this.formData);
        if (code == 200) {
          this.$notification.success({
            message: msg
          });
          this.getDetail();
        }
      } catch (error) {}
    }
  },
  watch: {
    formData: {
      deep: true,
      handler(newVal) {
        const newValue = JSON.stringify(newVal);
        const oldValue = JSON.stringify(this.oldFormData);
        if (this.type == 1) {
          this.columns.splice(this.columns.length - 1, 1);
        }
        if (newValue !== oldValue) {
          console.log("gai bian");
          this.isChange = true;
        } else {
          this.isChange = false;
        }
      }
    }
  },
  computed: {
    ...mapGetters(["token"]),
    isDisabled() {
      return this.type == 1;
    }
  }
};
</script>
<style lang="scss" scoped>
.projuect-detail-container {
  padding: 20px;
  .label-help {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    .icon {
      margin: 0 5px;
    }
  }
}
.form-input-material,
.form-check {
  margin: 20px 0 !important;
}
.form-check {
  label {
    margin-right: 10px;
  }
}

.upload-container {
  display: flex;
  margin-bottom: 20px;
}
</style>
